<div id="main-container">
  <div id="main-left" [class.menu-open]="!isCollapsed" [class.menu-collapsed]="isCollapsed">
    <div id="left-logo">
      <img *ngIf="!isCollapsed" src="/assets/images/top-logo-1.png" />
      <img *ngIf="isCollapsed" src="/assets/images/top-logo-2.png" />
      <button nz-button nzType="link" (click)="toggleCollapsed()">
        <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
      </button>
    </div>
    <ul nz-menu nzMode="inline" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
      <ng-container *ngFor="let menu of menus">
        <li *ngIf="menu.type === 'menu-item'" [nzMatchRouter]="true" nz-menu-item [routerLink]="[menu.link]">
          <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon"></i>
          <span>{{menu.name}}</span>
        </li>
        <li *ngIf="menu.type === 'submenu'" nz-submenu [nzOpen]="menu.open" [nzTitle]="menu.name" [nzIcon]="menu.icon">
          <ul>
            <li *ngFor="let child of menu.children" [nzMatchRouter]="true" nz-menu-item [routerLink]="[child.link]">
              <i *ngIf="child.icon" nz-icon nzType="child.icon"></i>
              <span>{{child.name}}</span>
            </li>
          </ul>
        </li>
      </ng-container>
    </ul>
  </div>
  <div id="main-right">
    <div id="top-right">
      <a nz-dropdown [nzDropdownMenu]="menu">
        {{userName}}
        <img src="/assets/images/header-default.png" />
        <i nz-icon nzType="caret-down" nzTheme="outline"></i>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li [routerLink]="['/main/user/password']" nz-menu-item>修改密码</li>
          <li (click)="loginOut()" nz-menu-item>退出登录</li>
        </ul>
      </nz-dropdown-menu>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>